<template>
  <div class="user-page">
    <!-- 顶部个人信息及vip信息 -->
    <business-card
      @showPopup="this.showPopp"
      :cardShareInfo="cardShareInfo"
      @selectedShortcut="shortcut"
    />
    <div class="business-status-con">
      <!-- </div> -->
      <div class="div_view">
        <ul class="ul_view">
          <li
            class="li_view"
            v-for="(item,index) in headIcons"
            :key="index"
            @click="selectedHead(item,index)"
          >
            <div>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.Icon" />
              </svg>
            </div>
            <div :class="index >4 ? '' : 'van-hairline--bottom'">
              <div style=" width: 100%; height: 52px; ">
                <span class="list-title">{{item.title}}</span>
                <span class="todo-tips" v-if="item.title == '今日待办' && incompleteNum > 0">
                  你有{{incompleteNum}}项待办
                  <span class="todo-badge"></span>
                </span>
              </div>
              <div style="width: 52px; height: 52px; ">
                <svg
                  class="icon"
                  aria-hidden="true"
                  style="width:16px;heigt:16px;margin-right:16px;"
                >
                  <use xlink:href="#icon-arrow-" />
                </svg>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-popup class="popup-view" v-model="openPopup" :click-overlay="overlayClose">
      <div class="close-titile">
        <img class="closePopup" :src="this.closeImg" @click="overlayClose" />
      </div>
      <img class="qrcode-view" :src="this.qrcodeImg" />
      <span class="notice-view">扫描二维码关注</span>
      <span class="username-view">{{userInfo.name}}</span>
      <span class="company-view">{{userInfo.enterpriseName}}</span>
    </van-popup>
  </div>
</template>
<script>
import businessCard from 'COMP/User/BusinessCard'
import userService from 'SERVICE/userService'
import dynamicsService from 'SERVICE/dynamicsService'
import * as types from '@/store/mutation-types'
import { mapGetters } from 'vuex'
import commonService from 'SERVICE/commonService'
import wechatService from 'SERVICE/wechatService'
export default {
  components: {
    businessCard
  },
  data: () => ({
    consultImg: require('IMG/user/Group8@2x.png'),
    closeImg: require('IMG/user/close_popup.png'),
    headIcons: [
      // { title: '今日待办', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-gerenzhongxin_jinridaiban' },
      { title: '我的问答', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-wenda' },
      { title: '我的点评', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-dianping' },
      // { title: '优惠券', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-youhuiquan' },
      // { title: '消费账单', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-dingdan' },
      { title: '邀请好友', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-yaoqingyouli' },
      { title: '拓客关系', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-guanxitu' },
      { title: '设置', Img: require('IMG/user/Group2@2x.png'), Icon: '#icon-shezhi' }
    ],
    btnIcons: [
      { title: '勿扰模式', Img: require('IMG/user/Group9@2x.png'), Icon: '#icon-me_night' },
      { title: '欢迎语设置', Img: require('IMG/user/reply_icon.png'), Icon: '#icon-me_reply' },
      { title: '意见反馈', Img: require('IMG/user/Group7@2x.png'), Icon: '#icon-me_opinion' },
      { title: 'AI客服', Img: require('IMG/user/me_Customer.png'), Icon: '#icon-me_Customer' }
    ],
    openPopup: false,
    qrcodeImg: '',
    oldUrl: 0,
    studyList: [],
    incompleteNum: 0,
    cardShareInfo: {},
    showInvite: false
  }),
  created() {
    this.getUserInfo()
    this.getQrCode(this.userInfo.agentId)
    this.queryIncompleteNum()
    this.getInvitationActivity()
    // this.getVipAndPackage()
  },
  computed: {
    ...mapGetters(['userInfo', 'userArea'])
  },
  methods: {
    // 是否邀请有礼
    getInvitationActivity() {
      wechatService
        .getInvitationActivity({})
        .then(res => {
          this.showInvite = res.invitationActivity
        })
        .catch()
    },
    // 经纪人未完成任务数量
    queryIncompleteNum() {
      dynamicsService
        .queryIncompleteNum({})
        .then(res => {
          this.incompleteNum = res.incompleteNum || 0
        })
        .catch()
    },
    relationHandle() {
      this.$router.push({ path: '/user/talk' })
    },
    enterSharePage() {
      this.$router.push({ path: '/user/share-card', query: { agentId: this.userInfo.agentId } })
    },

    overlayClose() {
      this.openPopup = false
    },
    goSchool() {
      userService
        .getStudyLinkerList({ agentId: this.userInfo.agentId })
        .then(result => {
          if (result.length == 0) {
            this.$toast('您开通的楼盘尚未上传培训素材')
          } else {
            this.$router.push('/user/learn/index')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //展示二维码框
    showPopp() {
      this.openPopup = true
    },
    //点击获取二维码
    async getQrCode(agentId) {
      const result = await userService.getQrCodeByToken(agentId)
      if (result) {
        this.qrcodeImg = result.miniQrCode
        this.cardShareInfo = result
      }
    },

    async getUserInfo() {
      // TODO jwt启用后应该不需再存userid
      // this.$store.dispatch('getUserVipInfo', userId)
    },
    // async getVipAndPackage() {
    //   await this.$store.dispatch('getUserVipInfo')
    // },
    // 名片分享数据上报
    shareMarketReport() {
      commonService.dataReport({
        code: 'MPFX',
        num: 1,
        agentId: this.userInfo.agentId,
        userActionType: 'MPFX',
        majorRegion: this.userInfo.majorRegion,
        location: this.userArea.city
      })
    },
    shortcut(index) {
      switch (index) {
        case 0:
          this.$router.push('/user/myReport')
          break
        case 1:
          this.$router.push({ name: 'historicalArticles', query: { typeCode: '2' } })
          break
        case 2:
          // this.$router.push('/user/learn')
          this.goSchool()
          break
        case 3:
          this.shareMarketReport()
          this.enterSharePage()
          break
      }
    },
    selectedHead(item, index) {
      switch (index) {
        // case 0:
        //   this.$router.push('/user/integral')
        //   break
        // case 0:
        //   this.$router.push('/dynamics/todoList')
        //   break
        case 0:
          this.$router.push('/user/questionAnswers')
          break
        // case 1:
        //   this.$router.push('/user/myCoupon')
        //   break
        case 1:
          this.$router.push('/user/remark')
          break
        case 2:
          let url = this.showInvite ? '/wx/invite/activity' : '/wx/invite/friends'
          this.$router.push(url)
          break
        case 3:
          this.$router.push('/user/talk')
          break
        case 4:
          this.$router.push('/user/set')
          break
      }
    },
    invitationHead() {
      this.$router.push('/user/invitation/awWelfare')
    },
    jumpToRemark() {
      this.$router.push('/user/remark')
    },
    jumpToAnswers() {
      this.$router.push('/user/questionAnswers')
    },
    goBack() {
      this.$router.replace({ path: '/dynamics' })
    }
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  }
}
</script>
<style lang="less" scoped>
.icon {
  width: 23px;
  height: 23px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.popup-view {
  width: 280px;
  height: 417px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  > .close-titile {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row-reverse;
    > .closePopup {
      width: 24px;
      height: 24px;
      margin-top: 16px;
      margin-right: 16px;
    }
  }

  > .qrcode-view {
    width: 200px;
    height: 200px;
    text-align: center;
    margin-top: 28px;
    padding: 20px;
  }
  > .notice-view {
    color: #969ea8;
    font-size: 12px;
  }
  > .username-view {
    color: #333333;
    font-size: 18px;
    margin-top: 60px;
    font-weight: bold;
  }
  > .company-view {
    margin-top: 7px;
    color: #333333;
    font-size: 12px;
  }
}
.user-page {
  display: flex;
  flex-direction: column;
  background: #f7f9fa;
  overflow: scroll;
  .business-status-con {
    margin-top: 6px;
    .div_view {
      .ul_view {
        list-style: none;
        .li_view {
          width: 100%;
          display: flex;
          background: #fff;
          div {
            display: flex;
            align-items: center;
          }
          div:nth-child(1) {
            height: 52px;
            width: 49px;
          }
          div:nth-child(2) {
            margin-left: 8px;
            width: 100%;
          }
          .icon {
            margin-left: 16px;
          }
          .list-title {
            color: #13284d;
            font-size: 14px;
          }
        }
        .li_view:last-child {
          width: 100%;
          height: 52px;
          margin-top: 6px;
          display: flex;
          background: #fff;
          margin-bottom: 60px !important;
        }
      }
      .todo-tips {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        color: #9ca5b5;
        font-size: 14px;
        margin-right: -25px;
        .todo-badge {
          display: block;
          height: 4px;
          width: 4px;
          margin-left: 4px;
          border-radius: 50%;
          background: #ea4d2e;
        }
      }
    }
  }
}
</style>
